/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
  // 第一种方式
  // function getChannelList(){
  //   axios({
  //     url:'/v1_0/channels'
  //   }).then(res => {
  //     console.log(res)
  //     document.querySelector('.form-select').innerHTML = `<option value="" selected>请选择文章频道</option>
  //       ${res.data.channels.map(item => {
  //       return `<option value="${item.id}">${item.name}</option>`
  //     }).join('')}
  //     `
  //   }).catch(err => {
  //     console.dir(err)
  //   })
  // }

  // 第二种方式
  async function getChannelList(){
    try{
      const res = await axios({
        url:'/v1_0/channels'
      })
      console.log(res)
      document.querySelector('.form-select').innerHTML = `<option value="" selected>请选择文章频道</option>
        ${res.data.channels.map(item => {
        return `<option value="${item.id}">${item.name}</option>`
      }).join('')}`
    }catch(err){
      console.dir(err)
    }
  }

  // 函数调用
  getChannelList()
  

/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
  // 获取img标签
  const img = document.querySelector('.rounded')
  console.log(img)
  // 获取上传图片标签
  const imgFile = document.querySelector('.img-file')
  // 获取图片+ label标签
  const place = document.querySelector('.place')
  // 上传图片事件
  imgFile.addEventListener('change', async e => {
    try{
      console.dir(e.target.files) //FileList
      console.dir(e.target.files[0]) //File
      const fileObj = e.target.files[0]
      // 参数名称	 参数类型	是否必须	备注
      // image	   file	    是		  图片file
      // Content-Type 	multipart/form-data	
      const fd = new FormData()
      fd.append('image', fileObj)
      // 第一种方式
      // const res = await axios({
      //   url:'/v1_0/upload',
      //   method:'post',
      //   data: fd
      // })

      // 第二种方式
      const res = await axios.post('/v1_0/upload', fd)

      console.log(res)
      img.src = res.data.url
      img.classList.add('show')
      place.classList.add('hide')
    }catch(err){
      console.dir(err)
    }
  })

  // 优化：点击img 重新切换图片
  // 思路：通过图片img 点击click事件 =》 然后用 JS 方式触发文件上传的 click事件的方法
  img.addEventListener('click', e => {
    // JS 方式触发文件上传 click事件方法
    imgFile.click()
  })
  

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
  document.querySelector('.send').addEventListener('click', async e => {
    if(e.target.innerHTML !== '发布') return
    // 获取form标签
    const formDom = document.querySelector('.art-form')
    // 获取form对象 用第三方库 form-serialize.js
    const formObj = serialize(formDom, {hash: true, empty: true})
    console.log(formObj)
    // 发布（新增）不需要传id属性 要删除掉  delete 对象.属性 , 修改时 需要传id
    formObj.id && delete formObj.id
    // 收集图片信息 放到formObj里
    formObj.cover = {
      type: 1, // 封面类型
      images: [img.src] // 封面图片url 地址
    }
    console.log(formObj)
    try{
      // 发布
      const res = await axios.post('/v1_0/mp/articles', formObj)
      console.log(res)
      myAlert(true, '发布成功！')
      // 重置表单 只能重置 input标签
      formDom.reset()
      // 封面 重置
      img.src = ''
      img.classList.remove('show')
      place.classList.remove('hide')
      // 富文本编辑器 重置 editor.js 已声明富文本editor对象
      editor.setHtml('')
      // 延时跳转
      setTimeout(() => {
        // 跳转 内容 列表页
        location.href = '../content/index.html'
      }, 1500)
    }catch(err) {
      console.dir(err)
      myAlert(false, err.data.message)
    }
  })

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
  // 自调用函数
  ;(function(){
    const paramStr = location.search // 获取url中"?"符后的字串
    // const url = location.href // 获取url
    // console.log(url)
    const urlParams = new URLSearchParams(paramStr)
    console.dir(urlParams)
    // 打印 属性值
    // for(const param of urlParams){
    //   console.log(param) // ['artId', 'a9fe0d1a-f596-4fda-8b64-34371a3f5143']
    // }
    // for(const [key, value] of urlParams){
    // [key, value] 数组解构
    //   console.log(key, value) // artId a9fe0d1a-f596-4fda-8b64-34371a3f5143
    // }
    // forEach() 方法有很多，Set、Map、Array、URLSearchParams、NodeList等都有自己的forEach() 
    // URLSearchParams接口的forEach() 方法 允许通过回调函数来遍历实例对象上的键值对
    urlParams.forEach(async (value, key) => {
      console.log(key, value) // artId a9fe0d1a-f596-4fda-8b64-34371a3f5143
      // 编辑文章页
      if(key === 'artId'){
        document.querySelector('.title span').innerHTML = '修改文章'
        document.querySelector('.send').innerHTML = '修改'
        // 通过查询文章详情 来回显
        const res = await axios({
          url:`/v1_0/mp/articles/${value}`
        })
        console.log(res)
        // 组织仅仅需要的对象，为后续遍历回显做铺垫  class名(id属性值)与属性名要一致
        const dataObj = {
          channel_id: res.data.channel_id,
          title: res.data.title,
          rounded: res.data.cover.images[0], // 图片url地址
          content: res.data.content,
          id: res.data.id
        }
        // 对象属性遍历 映射到标签元素上
        Object.keys(dataObj).forEach(key => {
          console.log(key)
          if(key === 'rounded'){
            // 有封面
            if(dataObj[key]){
              // 封面回显
              img.src = dataObj[key]
              img.classList.add('show')
              place.classList.add('hide')
            }
          }
          // 富文本
          if(key === 'content'){
            // 富文本对象
            editor.setHtml(dataObj[key])
          }
          // 其他回显 用标签 name属性
          document.querySelector(`[name=${key}]`) && (document.querySelector(`[name=${key}]`).value = dataObj[key])
        })
      }
    })
  })()

  // for...in 和 for...of 区别
  // for...in 语句用于迭代对象的可枚举字符串属性，而 for...of 语句用于迭代可迭代对象定义的要进行迭代的值。
  // 下面的示例展示了在迭代 Array 时，for...of 循环和 for...in 循环之间的区别。
  Object.prototype.objCustom = function () {};
  Array.prototype.arrCustom = function () {};

  const iterable = [3, 5, 7];
  iterable.foo = "hello";
  iterable.foo2 = "hello world";

  console.log(iterable) //  [3, 5, 7, foo: 'hello', foo2: 'hello world']
  console.log(iterable['foo']) // hello
  console.log(iterable.foo) // hello
  console.log(iterable[2]) // 7
  console.log(iterable[3]) // undefined
  for (const i in iterable) {
    console.log(i);
  }
  // "0"、"1"、"2"、"foo"、"foo2"、"arrCustom"、"objCustom"

  for (const i in iterable) {
    if (Object.hasOwn(iterable, i)) {
      console.log(i);
    }
  }
  // "0" "1" "2" "foo" "foo2"

  for (const i of iterable) {
    console.log(i);
  }
  // 3 5 7

  const iable = new Map([
    ["a", 1],
    ["b", 2],
    ["c", 3]
  ]);
  for (const entry of iable) {
    console.log(entry);
  }
  // ['a', 1]
  // ['b', 2]
  // ['c', 3]
  
  for (const [key, value] of iable) {
    // [key, value] 数组解构
    console.log(key); // a b c
    console.log(value); // 1 2 3
  }

  const able = [[1,3,4],['1','a','c'],[1,'5','g']] 

  for (const [a, b, c] of able) {
    // [a, b, c] 数组解构
    console.log(a, b); // 1 3   '1' 'a'   1 '5'
    console.log(c); // 4   'c'   'g'
  }

  // 解释如下： 大概区别for...in迭代的是属性 for...of迭代的是属性值
  // 1、iterable 对象继承了 objCustom 和 arrCustom 属性，因为其原型链中同时包含了 Object.prototype 和 Array.prototype。
  // 2、for...in 循环仅打印了 iterable 对象的可枚举属性。它不会打印数组中的元素 3、5、7 或 "hello" "hello world"，因为它们不是属性，而是值。它打印了数组的索引以及 arrCustom 和 objCustom，它们是实际的属性。如果你对为什么迭代这些属性感到困惑，可以查看关于数组迭代和 for...in 工作原理的更详细解释。
  // 3、第二个循环与第一个循环类似，但它使用 Object.hasOwn() 来检查找到的可枚举属性是否为对象的自有属性，即非继承属性。如果是，则打印该属性。属性 0、1、2 和 foo foo2被打印，因为它们是自有属性。属性 arrCustom 和 objCustom 没有被打印，因为它们是继承属性。
  // 4、for...of 循环迭代并打印 iterable 按照数组（数组是可迭代的）定义要进行迭代的值。对象的元素 3、5、7 被打印，但对象的属性没有被打印。



/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
  // 编辑 保存文章
  document.querySelector('.send').addEventListener('click', async e => {
    if(e.target.innerHTML !== '修改') return
    // 获取form标签
    const formDom = document.querySelector('.art-form')
    // 获取form对象 用第三方库 form-serialize.js
    const formObj = serialize(formDom, {hash: true, empty: true})
    console.log(formObj)
    try{
      // 编辑
      // const res = await axios.put(`/v1_0/mp/articles/${formObj.id}`, formObj)
      const res = await axios({
        url:`/v1_0/mp/articles/${formObj.id}`,
        method:'put',
        data:{
          ...formObj,
          cover:{
            type: document.querySelector('.rounded').src ? 1 : 0,
            images: [document.querySelector('.rounded').src]
          }
        }
      })
      console.log(res)
      myAlert(true, '发布成功！')
      // 重置表单 只能重置 input标签
      formDom.reset()
      // 封面 重置
      img.src = ''
      img.classList.remove('show')
      place.classList.remove('hide')
      // 富文本编辑器 重置 editor.js 已声明富文本editor对象
      editor.setHtml('')
      // 延时跳转
      setTimeout(() => {
        // 跳转 内容 列表页
        location.href = '../content/index.html'
      }, 1500)
    }catch(err) {
      console.dir(err)
      myAlert(false, err.data.message)
    }
  })